<template>
  <div class="container">
    <div class="details">
      <div class="details-img">
        <img
          :src="'http://www.xiaoshuaipeng.com:8080' + list.houseImg[0]"
          alt=""
        />
      </div>
      <div>
        <div class="title">
          <p>{{ list.title }}</p>
          <p>
            <span v-for="(a, index) in list.tags" :key="index">{{ a }}</span>
          </p>
        </div>
        <div class="house-title">
          <p>{{ list.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  // name:'',
  data() {
    return {
      list: {},
    };
  },
  async created() {
    console.log();
    const res = await axios.get(
      `http://www.xiaoshuaipeng.com:8080/houses/${this.$route.params.id}`
    );
    console.log(res.data.body);
    this.list = res.data.body;
  },
  methods: {},
};
</script>

<style scoped lang="less">
.details {
  .details-img {
    img {
      width: 100vw;
    }
  }
  .title {
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 8px;
    font-size: 16px;
    font-weight: 600;
    p:nth-child(2) {
      font-size: 12px;

      color: white;
      span {
        text-align: center;
        display: inline-block;
        width: 60px;
        background-color: #33ea45;
      }
    }
  }
  .house-title {
    margin-top: 5px;
    background-color: #fff;
  }
}
</style>
